<template>
  <div>

    <el-row id="index-1">
      <el-col :span="4">&nbsp &nbsp</el-col>
      <el-col :span="14">

        <el-link type="primary"><a href="#/VenueHome" id="index-1-0">首页</a></el-link>

        &nbsp&nbsp

        <el-link v-if="venue.venueState == 2" type="primary"><a href="#/VenuePersonalCenter"
            id="index-1-0">场馆中心</a></el-link>
        &nbsp&nbsp

        <el-link v-if="venue.venueState == 2" type="primary"><a href="#/VenueClassroom"
            id="index-1-0">场馆教室</a></el-link>
        &nbsp&nbsp

        <el-menu v-if="venue.venueState == 2" mode="horizontal" background-color="#545c64" text-color="#fff"
          active-text-color="#ffd04b">

          <el-menu-item index="1">
            <a href="#/VenueLeagueClass">团课</a></el-menu-item>

          <el-menu-item index="2">
            <a href="#/VenueLeagueClassWorkforce">团课排班</a></el-menu-item>

          <el-submenu index="3">
            <template slot="title">管理</template>
            <el-menu-item index="2-1"><a href="#/VenueExamine">审批管理</a></el-menu-item>
            <el-menu-item index="2-2"><a href="#/VenueAdminCoach">教练管理</a></el-menu-item>
            <el-menu-item index="2-3"><a href="#/venueRecruit">招聘管理</a></el-menu-item>
          </el-submenu>
          <el-menu-item index="4" ><a href="#/CoachMyTeaching">私教课管理
            </a></el-menu-item>
        </el-menu>

      </el-col>
      <el-col :span="6" id="index-1-1">
        <div id="top-2"> 欢迎您：{{venue.venueName}} </div>

        <el-button v-if="venue.venueState == 1" @click="changeVenue" type="danger">点击认证</el-button>

        <el-link type="primary"><a href="#/VenueLogin" id="index-1-1-1" @click="removeToken()">退出登录</a></el-link>
      </el-col>



      <el-dialog title="平台认证" :visible.sync="showUpdate" @open="onDialogOpen" width="30%">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
          <el-form-item label="场馆名">
            <el-input v-model="sizeForm.venueName"></el-input>
          </el-form-item>
          <el-form-item label="场馆电话">
            <el-input v-model="sizeForm.venuePhone"></el-input>
          </el-form-item>
          <el-form-item label="场馆地址">
            <el-input v-model="sizeForm.venueAddress"></el-input>
          </el-form-item>
          <el-form-item label="场馆经度">
            <el-input v-model="sizeForm.longitude"></el-input>
          </el-form-item>
          <el-form-item label="场馆纬度">
            <el-input v-model="sizeForm.latitude"></el-input>
          </el-form-item>
          <el-form-item label="场馆详情">
            <el-input v-model="sizeForm.venueDetails"></el-input>
          </el-form-item>
          <el-form-item label="场馆许可证">
            <el-upload ref="venueLicenseFile" :action="''" :auto-upload="false" :on-change="handleLicenseFileChange">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="场馆图片">
            <el-upload ref="venueImgFile" :action="''" :auto-upload="false" :on-change="handleImgFileChange">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="选择位置">
            <el-button @click="showLocation">点击选择位置</el-button>
          </el-form-item>
          <div v-show="showMap">
            <div id="container" style="width: 100%; height: 400px;"></div>
            <el-button type="primary" @click="confirmLocation">确认选择</el-button>
            <el-button @click="showMap = false" type="danger" round>关 闭</el-button>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即申请</el-button>
            <el-button @click="showUpdate = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-row>


    <el-row>
      <router-view></router-view>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "VenueHome",
    data() {
      return {
        sizeForm: {
          venueName: '',
          venuePhone: '',
          venueAddress: '',
          venueDetails: '',
          venueImgFile: null,
          venueLicenseFile: null
        },
        showUpdate: false,
        showMap: false, // 显示地图
        showAddWindow: false,
        venue: {},
      }
    },
    methods: {
      //退出登录清理token
      removeToken() {
        localStorage.clear("token")
      },

      /**场馆图片文件选择，将选中的场馆图片文件保存到表单数据对象中。
       */
      handleImgFileChange(file) {
        this.sizeForm.venueImgFile = file.raw;
      },
      /**
       *  许可证文件选择，将选中的许可证文件保存到表单数据对象中。
       */
      handleLicenseFileChange(file) {
        this.sizeForm.venueLicenseFile = file.raw;
      },
      /**场馆图片文件选择，将选中的场馆图片文件保存到表单数据对象中。
       */
      handleImgFileChange(file) {
        this.sizeForm.venueImgFile = file.raw;
      },
      changeVenue() {
        this.showUpdate = true;
      },
      onSubmit() {
        //创建 FormData 对象
        const formData = new FormData();
        //添加表单数据到 FormData
        formData.append('venueName', this.sizeForm.venueName);
        formData.append('venuePhone', this.sizeForm.venuePhone);
        formData.append('venueAddress', this.sizeForm.venueAddress);
        formData.append('venueDetails', this.sizeForm.venueDetails);
        //添加图片和文件到 FormData
        if (this.sizeForm.venueImgFile) {
          formData.append('venueImgFile', this.sizeForm.venueImgFile);
        }
        if (this.sizeForm.venueLicenseFile) {
          formData.append('venueLicenseFile', this.sizeForm.venueLicenseFile);
        }
        //发送 POST 请求后端新增申请方法
        this.$http.post('venue/yQualification/addQualification', formData, {
          headers: {
            'Authorization': this.token,
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.showUpdate = false;
        })
      },
      loadVenue() {
        this.$http.get("/account/yVenue/loadMyVenue").then(resp => {
          this.venue = resp.data.data;

        })
      },
      // 确认选择位置
      confirmLocation() {
        this.showMap = false;
        this.showAddWindow = true;
        this.$message.success("位置选择成功");
      },
      // 显示地图选择位置
      showLocation() {
        this.showMap = true;
        this.showAddWindow = false;
      },
      // 新增站点对话框打开时初始化地图
      onDialogOpen() {
        if (!this.map) {
          setTimeout(() => {
            this.initMap();
          });
        }
      },
      // 初始化地图
      initMap() {
        console.log("Initializing map...");
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 10,
          center: [106.525406, 29.585546], // 初始化地图中心点
        });
        this.map.on("click", this.onMapClick);
        console.log("Map initialized.");
      },
      // 地图点击事件
      onMapClick(e) {
        this.sizeForm.longitude = e.lnglat.getLng();
        this.sizeForm.latitude = e.lnglat.getLat();
        if (this.marker) {
          this.marker.setPosition(e.lnglat);
        } else {
          this.marker = new AMap.Marker({
            position: e.lnglat,
            map: this.map,
          });
        }
      },
      // 确认选择位置
      confirmLocation() {
        this.showMap = false;
        this.showAddWindow = true;
        this.$message.success("位置选择成功");
      },
    },
    created() {
      this.loadVenue();
    }
  }
</script>

<style>
  .demonstration {
    font-family: '宋体';
    font-size: 15px;

  }

  .img-container {
    display: flex;
    flex-wrap: wrap;
    /* 允许项目换行显示 */
    justify-content: center;
    /* 水平居中对齐 */
  }

  .img1,
  .img2,
  .img3,
  .img4,
  .img5,
  .img6 {
    width: 400px;
    /* 设置元素宽度 */
    line-height: 35px;
    margin: 10px;
    /* 添加一些间距 */
  }

  #text1 {
    font-family: '华文行楷';
    font-size: 30px;
    text-align: center;
    color: red;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-image: url(/static/index1.png);
    background-size: cover;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-image: url(/static/index2.png);
    background-size: cover;
  }

  #index-1-1-1 {
    font-family: '方正姚体';
    font-size: 17px !important;
    color: white !important;
    text-decoration: none;
  }

  #index-1-0 {
    font-family: '华文彩云';
    font-size: 20px !important;
    color: white !important;
    text-decoration: none;
  }

  #index-1-1 {
    color: azure;
    font-size: 25px;
    font-family: '楷体';

  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  #index-1 {
    line-height: 60px;
    background-color: rgb(42, 44, 56);
  }

  #top-3 {
    margin-top: 80px;
  }

  #top-2 {
    font-family: '华文彩云';
    margin-top: 30px;
    font-size: 25px;
  }

  #top-1 {
    margin-top: 20px;
    margin-left: 70px;
    line-height: 110px;
    background-image: url(/static/logo.png);
    background-size: auto 100%;
    /* 横向拉伸，纵向保持原始比例 */
  }

  #index-2 {
    background-color: rgb(242, 242, 242);
    text-align: center;
    line-height: 80px;
  }

  * {
    margin: 0;
    padding: 0;
  }
</style>
